<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./css/bootstrap.css">
        <link rel="stylesheet" href="./css/swiper-bundle.min.css">
        <link rel="stylesheet/less" type="text/css" href="./css/product.less" />
        <!-- 动画插件 -->
        <link rel="stylesheet" href="./css/animate2013.min.css">
        <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
        <title>产品介绍</title>
    </head>
    <body>
        <!--  主体部分 -->
        <div class="all">
            <!-- 左部分 -->
            <div class="left container">
                <nav class="row flex alignCenter">
                    <div class="logo2 col-md-4"><img src="./img/logo.png" alt=""></div>
                    <div class="col-md-2 col-md-offset-2 text-center">
                        <a href="#"><span class="glyphicon glyphicon-glass"><br></span>门店</a>
                    </div>
                    <div class="col-md-2 text-center">
                        <a href="#"><span class="glyphicon glyphicon-th-list"><br></span>订单</a>
                    </div>
                    <div class="userCenter col-md-3 text-center">
                        <a href="#"><span class="glyphicon glyphicon-home"><br></span>个人中心</a>
                    </div>
                    <div class="userhead col-md-2">
                        <a href="#"><img src="./img/userhead/头像1.png" alt=""></a>
                    </div>
                </nav>


                <div class="userContrl row flex justifyCenter alignCenter w100 h100">
                    请您先<a href="#">登录</a>或<a href="#">注册</a>。
                </div>
            </div>
            <!-- 右部分 -->
            <div class="right" style="">
                <div class="container" style="width: 100%;">
                    <div class="row" style="">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="./img/lunbo/轮播1.png" alt=""></div>
                                <div class="swiper-slide"><img src="./img/lunbo/轮播2.png" alt=""></div>
                                <div class="swiper-slide"><img src="./img/lunbo/轮播3.png" alt=""></div>
                            </div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>

                    <!-- 下方推荐 -->
                    <div class="row recommendeds"></div>

                    <!-- 商品列表 -->
                    <div class="products">

                        <!-- 饮料类 -->
                        <div class="row productTitle"><strong>饮料</strong></div>
                        <div class="row mb1 mt1 drinks pb1"></div>

                        <!-- 米饭类 -->
                        <div class="row productTitle"><strong>米饭类</strong></div>
                        <div class="row mb1 mt1 rice pb1"></div>

                        <!-- 面食 -->
                        <div class="row productTitle"><strong>面食</strong></div>
                        <div class="row mb1 mt1 noodles pb1"></div>

                        <!-- 甜品 -->
                        <div class="row productTitle"><strong>甜品/小食</strong></div>
                        <div class="row mb1 mt1 dessert pb1"></div>

                    </div>

                    <!-- 页脚 -->
                    <footer class="pb1 pt1 fl2 justifyCenter">
                        <strong>一切产品以实物为准，最终解释权归本公司所有。</strong>
                    </footer>

                </div>
            </div>



            <!-- 商品详情页 -->
            <div class="productDetails">
                <div class="container">
                    <div class="row mb1">
                        <h2 class="back"><strong>back</strong></h2>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <img class="productImg" src="./img/products/dessert/精神饱满水果麦片.png" alt="">
                        </div>
                        <div class="col-md-9">
                            <h2><strong class="productName">精神饱满水果麦片</strong></h2>
                            <div class="productTips">
                                <span class="productTip">甜味</span>
                                <span class="productTip">时长：5小时</span>
                            </div>
                            <span class="productDescribe">每天早餐来一份，为您带来五小时的精神饱满，火力全开面对新的一天！</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>







        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./js/chooseData.js"></script>
        <script src="./js/swiper-bundle.min.js"></script>
        <script src="./js/product.js"></script>
    </body>
</html>
